import React, { Component } from 'react';
import { Grid } from '@icedesign/base';
import IceContainer from '@icedesign/container';
import { Chart, Axis, Geom, Tooltip } from 'bizcharts';

const { Row, Col } = Grid;

export default class DataStatistics extends Component {
  static displayName = 'DataStatistics';

  static propTypes = {};

  static defaultProps = {
    data : []
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div className="data-statistics">
        <IceContainer>
          <h4 style={styles.title}>月度广告推送统计</h4>
          <Chart height={300} padding={[40, 10, 40, 35]} data={this.props.data} scale={{ value: { tickInterval: 100 } }} forceFit>
            <Axis name="name" />
            <Axis name="value" />
            <Tooltip crosshairs={{ type: 'y' }} />
            <Geom type="interval" position="name*value" />
          </Chart>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  container: {
    width: '100%',
  },
  title: {
    margin: 0,
    fontSize: '16px',
    paddingBottom: '15px',
    fontWeight: 'bold',
    color: '#333',
    borderBottom: '1px solid #eee',
  }
};
